<template>
  <div class="box">
    <div class="setting">
      <div class="top">
        <div class="lvgang"></div>
        <span>系统设置</span>
      </div>
      <div class="inpu">
        <div class="root">
          <div class="name">
            管理员账号：<br />
            <el-input placeholder="请输入内容" v-model="input" clearable>
            </el-input>
          </div>
          <div class="pass">
            密码: <br />
            <el-input placeholder="请输入内容" v-model="input2" clearable>
            </el-input>
          </div>
        </div>
        <div class="xulie">
          序列号设置: <br />
          <el-input placeholder="请输入内容" v-model="input3" clearable>
          </el-input>
        </div>
      </div>
    </div>
    <div class="tabss">
      <div class="top">
        <div class="lvgang"></div>
        <span>网络设置</span>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="接口设置" name="first">
          <div class="show-box">
            <el-table :data="tablesData" style="width: 100%">
              <el-table-column prop="id" label="#" width="190">
              </el-table-column>
              <el-table-column prop="jk" label="接口名称" width="190">
              </el-table-column>
              <el-table-column prop="msg" label="描述" width="190">
              </el-table-column>
              <el-table-column prop="ip" label="IP地址" width="190">
              </el-table-column>
              <el-table-column prop="button" label="状态" width="190">
                <el-button type="success" round size="mini">开启</el-button>
              </el-table-column>
            </el-table>
          </div></el-tab-pane
        >
        <el-tab-pane label="路由设置" name="second"
          ><div class="show-box2">
            <el-table :data="routerdata" style="width: 100%">
              <el-table-column prop="id" label="#" width="190">
              </el-table-column>
              <el-table-column prop="jk" label="目的名称" width="190">
              </el-table-column>
              <el-table-column prop="msg" label="子网掩码" width="190">
              </el-table-column>
              <el-table-column prop="ip" label="下跳网关" width="190">
              </el-table-column>
              <el-table-column prop="button" label="状态" width="190">
                <el-button type="success" round size="mini">开启</el-button>
              </el-table-column>
            </el-table>
          </div></el-tab-pane
        >
        <el-tab-pane label="DNS配置" name="third"
          ><div class="show-box3">
            <el-table :data="dnsdata" style="width: 100%">
              <el-table-column prop="id" label="#" width="237">
              </el-table-column>
              <el-table-column prop="jk" label="DNS IP" width="237">
              </el-table-column>
              <el-table-column prop="msg" label="描述" width="237">
              </el-table-column>
              <el-table-column prop="button" label="状态" width="237">
                <el-button type="success" round size="mini">开启</el-button>
              </el-table-column>
            </el-table>
          </div></el-tab-pane
        >
      </el-tabs>
    </div>

    <div class="Suitable">
      <div class="top">
        <div class="lvgang"></div>
        <span>通用设置</span>
      </div>
      <el-tabs v-model="activeName1" @tab-click="handleClick">
        <el-tab-pane label="控制台配置" name="first">
          <div class="Consolecen">
            <div class="Consoleone">
              <p>页面超时设置</p>
              <div >
                <el-input placeholder="请输入内容" v-model="input4" clearable>
              </el-input><span>分钟</span>
              </div>
           
            </div>
            <div class="recent">
              <el-space wrap>
                <span>远程控制：</span>
                <el-checkbox v-model="checked1" fill="#08c573"></el-checkbox>
                <span>临时开启SSH后台</span>
              </el-space>
            </div>
            <div class="recent">
              <el-space wrap>
                <span>升级控制：</span>
                <el-checkbox v-model="checked2" fill="#08c573"></el-checkbox>
                <span>临时开启Sangfor Upadater升级支持</span>
              </el-space>
            </div>
            <div class="recent">
              <el-space wrap>
                <span>防护控制：</span>
                <el-checkbox v-model="checked3" fill="#08c573"></el-checkbox>
                <span>临时关闭WEB控制台防护</span>
              </el-space>
            </div>
          </div></el-tab-pane
        >
        <el-tab-pane label="邮件配置" name="second">
          <div class="Mail">
            <ul class="e_mail">
              <li>
                <span>安全事件模板CODE:</span>
                <el-input placeholder="请输入内容" v-model="input5" clearable>
                </el-input>
              </li>
              <li>
                <span>SMTP邮件服务器：:</span>
                <el-input placeholder="请输入内容" v-model="input6" clearable>
                </el-input>
              </li>
              <li>
                <span>端口：:</span>
                <el-input placeholder="请输入内容" v-model="input7" clearable>
                </el-input>
              </li>
              <li>
                <span>密码：:</span>
                <el-input placeholder="请输入内容" v-model="input8" clearable>
                </el-input>
              </li>
            </ul></div
        ></el-tab-pane>
        <el-tab-pane label="短信配置" name="third">
          <div class="dx">
            <ul class="msg">
              <li>
                <span>短信平台</span>
                <el-input placeholder="请输入内容" v-model="input8" clearable>
                </el-input>
              </li>
              <li>
                <span>AccessKeyID </span>
                <el-input placeholder="请输入内容" v-model="input8" clearable>
                </el-input>
              </li>
              <li>
                <span>AccessKeySecret</span>
                <el-input placeholder="请输入内容" v-model="input8" clearable>
                </el-input>
              </li>
              <li>
                <span>短信签名</span>
                <el-input placeholder="请输入内容" v-model="input8" clearable>
                </el-input>
              </li>
            </ul>
          </div>
          <h2 class="h2">安全告警-短信模板配置</h2>
          <div class="dx">
            <ul class="msg">
              <li>
                <span>安全事件模板CODE:</span>
                <el-input placeholder="请输入内容" v-model="input8" clearable>
                </el-input>
              </li>
              <li>
                <span>外部高危攻击模板 </span
                ><el-input placeholder="请输入内容" v-model="input8" clearable>
                </el-input>
              </li>
              <li>
                <span>脆弱性模板</span>
                <el-input placeholder="请输入内容" v-model="input8" clearable>
                </el-input>
              </li>
              <li>
                <span>通报超时提醒模板CODE</span>
                <el-input placeholder="请输入内容" v-model="input8" clearable>
                </el-input>
              </li>
              <li>
                <span>接入设备模板CODE</span>
                <el-input placeholder="请输入内容" v-model="input8" clearable>
                </el-input>
              </li>
              <li>
                <span>预警信息模板CODE</span>
                <el-input placeholder="请输入内容" v-model="input8" clearable>
                </el-input>
              </li>
              <li>
                <span>通报信息模板CODE</span>
                <el-input placeholder="请输入内容" v-model="input8" clearable>
                </el-input>
              </li>
              <li>
                <span>公告信息模板CODE</span>
                <el-input placeholder="请输入内容" v-model="input8" clearable>
                </el-input>
              </li>
              <li>
                <span>补丁包更新告警模板CODE</span>
                <el-input placeholder="请输入内容" v-model="input8" clearable>
                </el-input>
              </li>
            </ul>
          </div>
          <div class="button">
            <el-space wrap>
              <el-button type="info" round>发送测试短信</el-button>

              <el-button type="success" round>确定</el-button>
            </el-space>
          </div>
        </el-tab-pane>
        <el-tab-pane label="系统时间" name="fourth">
          <h2>日期/时间</h2>
          <div class="time">
            <el-space wrap>
              <span>系统日期/时间</span>
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
              <el-time-picker
                v-model="value1"
                :disabled-hours="disabledHours"
                :disabled-minutes="disabledMinutes"
                :disabled-seconds="disabledSeconds"
                placeholder="任意时间点"
              >
              </el-time-picker>
            </el-space>
          </div>
          <div class="ntp">
            <a-space>
              <el-checkbox v-model="checked4"></el-checkbox>
              开启NTP时间同步</a-space
            >
          </div>
          <div class="serve">
            <a-space :size="30"
              >NTP服务器 <a-input placeholder="输入内容.." size="large"
            /></a-space></div
        ></el-tab-pane>
        <el-tab-pane label="隐私配置" name="ys">
          <h2>隐私设置</h2>
          <div class="shut">
            <a-space>
              <el-checkbox v-model="checked5"></el-checkbox>
              参与用户体验改进计划</a-space
            >
          </div></el-tab-pane
        >
      </el-tabs>
    </div>
    <!-- 日志配置 -->
    <div class="Log">
      <div class="top">
        <div class="lvgang"></div>
        <span>日志配置</span>
      </div>
      <!-- 进度条 -->
      <div class="barr">
        <div class="bar-1">
          <span>当前存储空间占用率:</span>
          <!-- 进度条 -->

          <el-progress
            :percentage="4"
            color="#08c573"
            style="width: 600px; margin-left: 20px"
          ></el-progress>
        </div>
        <!-- 存储占用---显示 -->
        <div class="show">
          <span>当前存储空间占用：29.30G</span>
          <span>剩余空间：978.50G</span>
        </div>
      </div>
      <!-- 存储空间清除阈值 -->
      <div class="Threshold">
        <p>存储空间清除阈值:</p>
        <el-input placeholder="请输入内容" v-model="input8" clearable>
        </el-input>
        &nbsp; &nbsp;%
      </div>
      <!-- 安全监测日志 -->
      <div class="Safety">
        <!-- 监测 -->
        <div class="monitor">
          <p>安全监测日志</p>
          <div class="tor">
            存储天数：
            <el-space>
              <el-radio v-model="radio" label="1">自定义</el-radio>
              <el-input
                placeholder="请输入内容"
                class="tiao"
                v-model="input9"
                clearable
                >天
              </el-input>
              <el-radio v-model="radio" label="4">不限制</el-radio>
            </el-space>
          </div>
        </div>
        <!-- 安全事件 -->
        <div class="incident">
          <p>安全事件</p>
          <div class="dent">
            存储天数：
            <el-space>
              <el-radio v-model="radio1" label="2">自定义</el-radio>
              <el-input
                placeholder="请输入内容"
                class="tiao"
                v-model="input9"
                clearable
                >天
              </el-input>
              <el-radio v-model="radio1" label="5">不限制</el-radio>
            </el-space>
          </div>
        </div>
        <!-- 第三方日志 -->
        <div class="party">
          <p>第三方日志</p>
          <div class="par">
            存储天数：
            <el-space>
              <el-radio v-model="radio2" label="3">自定义</el-radio>
              <el-input
                placeholder="请输入内容"
                class="tiao"
                v-model="input9"
                clearable
                >天
              </el-input>
              <el-radio v-model="radio2" label="6">不限制</el-radio>
            </el-space>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default {
  setup() {
    const tablesData = [
      {
        id: 1,
        jk: "thc1",
        msg: "192.168.1.1",
        ip: "192.168.1.1",
      },
      {
        id: 1,
        jk: "thc1",
        msg: "192.168.1.1",
        ip: "192.168.1.1",
      },
      {
        id: 1,
        jk: "thc1",
        msg: "192.168.1.1",
        ip: "192.168.1.1",
      },
    ];
    const routerdata = [
      {
        id: 1,
        jk: "thc1",
        msg: "192.168.1.1",
        ip: "192.168.1.1",
      },
      {
        id: 1,
        jk: "thc1",
        msg: "192.168.1.1",
        ip: "192.168.1.1",
      },
      {
        id: 1,
        jk: "thc1",
        msg: "192.168.1.1",
        ip: "192.168.1.1",
      },
    ];
    const dnsdata = [
      {
        id: 1,
        jk: "thc1",
        msg: "192.168.1.1",
      },
      {
        id: 1,
        jk: "thc1",
        msg: "192.168.1.1",
      },
      {
        id: 1,
        jk: "thc1",
        msg: "192.168.1.1",
      },
    ];
    return {
      input: ref(""),
      input2: ref(""),
      input3: ref(""),
      input4: ref(""),
      input5: ref(""),
      input6: ref(""),
      input7: ref(""),
      input8: ref(""),
      radio: ref("1"),
      radio1: ref("2"),
      radio2: ref("3"),
      tablesData,
      activeName: "first",
      activeName1: "first",
      routerdata,
      dnsdata,
      checked1: ref(true),
      checked2: ref(false),
      checked3: ref(true),
    };
  },
};
</script>
<style  lang="less">
.box {
  margin-top: 30px;
  width: 870px;
  float: right;
  padding-right: 25px;
  * {
    margin: 0;
    list-style: none;
    text-decoration: none;
    user-select: none;
  }
  .el-tabs__active-bar {
    background-color: #08c573;
  }
  .el-tabs__item.is-active {
    color: #08c573;
  }
  .el-tabs__item:hover{
    color: #08c573;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner{
    background-color: #08c573;
    border: 1px solid #08c573;
  }
  .el-checkbox__inner:hover{
    border: 1px solid #08c573;
  }
  .el-radio__input.is-checked .el-radio__inner{
    border: 1px solid #08c573;
    background-color: #08c573;
  }
  .el-radio__input.is-checked+.el-radio__label{
    color:#08c573 ;
  }
  .setting {
    .top {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .lvgang {
        width: 8px;
        height: 28px;
        background-color: #08c573;
        margin-right: 14px;
      }
      span {
        font-size: 24px;
      }
    }

    .inpu {
      .root {
        display: flex;
        font-size: 18px;
        justify-content: space-between;
        margin-bottom: 20px;
        .name {
          width: 48%;
        }
        .pass {
          width: 48%;
        }
        input {
          width: 100%;
          height: 40px;
          font-size: 16px;
        }
      }
      .xulie {
        font-size: 18px;
        input {
          width: 100%;
          height: 40px;
          font-size: 16px;
        }
      }
    }
  }
  .tabss {
    margin-top: 60px;
    height: 324px;

    .top {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .lvgang {
        width: 8px;
        height: 28px;
        background-color: #08c573;
        margin-right: 14px;
      }
      span {
        font-size: 24px;
      }
    }
    .tabs {
      height: 324px;
      margin: 0 auto;
      .tab {
        display: flex;
        justify-content: space-between;
        dl {
          dt {
            width: 180px;
            height: 58px;
            line-height: 42px;
            font-weight: bold;
            border-bottom: 2px solid gainsboro;
          }
          dd {
            width: 180px;
            height: 44px;
            line-height: 44px;
            border-bottom: 1px solid gainsboro;
          }
        }
        .kai {
          dd {
            color: #fff;
            width: 40px;
            background-color: #08c573;
            text-indent: 7px;
            border-radius: 5%;
            height: 22px;
            line-height: 20px;
            margin-bottom: 25px;
          }
          .xian {
            border-bottom: 1px solid gainsboro;
            height: 33px;
            .qi {
              margin-top: 11px;
              width: 40px;
            }
          }
          .xq {
            margin-top: 11px;
          }
        }
        .de {
          dt {
            width: 225px;
          }
          dd {
            width: 225px;
          }
        }
      }
    }
  }

  .Suitable {
    margin-top: 60px;
    .top {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .lvgang {
        width: 8px;
        height: 28px;
        background-color: #08c573;
        margin-right: 14px;
      }
      span {
        font-size: 24px;
      }
    }

    .Consoleone {
      margin: 20px 0 40px;
      p {
        font-size: 18px;
      }
      .el-input__inner {
        width: 50%;
        height: 40px;
      }
    }
    .recent {
      margin-bottom: 20px;
      span {
        font-size: 16px;
      }
    }

  
    .Mail {  margin-top: 20px;
      .e_mail {
        padding: 0;
        font-size: 16px;
        li {
          display: flex;
          margin-bottom: 20px;
          span {
            display: inline-block;
            width: 30%;
          }
          input {
            width: 50%;
            height: 40px;
          }
        }
      }
    }

   
    .msg {
       margin-top: 20px;
      padding: 0;
      font-size: 16px;
      li {
        display: flex;
        margin-bottom: 20px;
        span {
          display: inline-block;
          width: 30%;
        }
        input {
          width: 50%;
          height: 40px;
        }
      }
    }

   
    .time {
       margin-top: 20px;
      padding: 10px;
      margin-bottom: 20px;
    }
    .serve {
      
      padding: 10px;
      input {
        width: 100%;
        height: 40px;
      }
    }
    .ant-time-picker-icon,
    .ant-time-picker-clear {
      top: 40%;
    }
    .ant-calendar-picker-clear,
    .ant-calendar-picker-icon {
      top: 40%;
    }

    
    .shut {
      margin-top: 20px;
      padding: 10px;
    }
  }
  .h2 {
    margin: 20px 0;
  }
  .Log {
    margin-top: 60px;
    .top {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .lvgang {
        width: 8px;
        height: 28px;
        background-color: #08c573;
        margin-right: 14px;
      }
      span {
        font-size: 24px;
      }
    }
    div > h1 {
      border-left: 10px solid forestgreen;
      padding-left: 20px;
    }
    // 进度条
    .barr {
      margin-bottom: 20px;
      font-size: 16px;
      .bar-1 {
        display: flex;
      }
      .show {
        margin-left: 180px;
        span:nth-of-type(2) {
          margin-left: 40px;
        }
      }
    }
    // 存储空间清除阈值
    .Threshold {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      p {
        font-size: 18px;
        width: 20%;
      }
      .el-input {
        width: 50%;
        height: 40px;
        font-size: 16px;
      }
    }
    //
    .Safety {
      margin-top: 40px;
      .monitor {
        margin-bottom: 20px;
        p {
          font-size: 18px;
        }
        .tor {
          font-size: 16px;
          .tiao {
            width: 100%;
            height: 40px;
            font-size: 16px;
          }
          input:nth-of-type(2),
          input:nth-of-type(3) {
            margin-left: 20px;
          }
          input {
            outline-style: none;
            -webkit-appearance: none;
            appearance: none;
            cursor: pointer;
          }
          label input {
            vertical-align: text-bottom;

            width: 18px;
            height: 18px;
            border: 1px solid #dddddd;
            border-radius: 50%;
          }
          label input:checked {
            border: 6px solid #33cabb;
            background: #ffffff;
          }
        }
      }
      //安全事件
      .incident {
        margin-bottom: 20px;
        p {
          font-size: 18px;
        }
        .dent {
          font-size: 16px;
          input:nth-of-type(2),
          input:nth-of-type(3) {
            margin-left: 20px;
          }
          .tiao {
            width: 100%;
            height: 40px;
            font-size: 16px;
          }
          input {
            outline-style: none;
            -webkit-appearance: none;
            cursor: pointer;
            appearance: none;
          }
          label input {
            vertical-align: text-bottom;
            width: 18px;
            height: 18px;
            border: 1px solid #dddddd;
            border-radius: 50%;
          }
          label input:checked {
            border: 6px solid #33cabb;
            background: #ffffff;
          }
        }
      }
      // 第三方日志
      .party {
        margin-bottom: 20px;
        p {
          font-size: 18px;
        }
        .par {
          font-size: 16px;
          input:nth-of-type(2),
          input:nth-of-type(3) {
            margin-left: 20px;
          }
          .tiao {
            width: 100%;
            height: 40px;
            font-size: 16px;
          }
          input {
            outline-style: none;
            -webkit-appearance: none;
            cursor: pointer;
            appearance: none;
          }
          label input {
            vertical-align: text-bottom;

            width: 18px;
            height: 18px;
            border: 1px solid #dddddd;
            border-radius: 50%;
          }
          label input:checked {
            border: 6px solid #33cabb;
            background: #ffffff;
          }
        }
      }
    }
  }
}
</style>